<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="shortcut icon" href="../../static/imgs/favicon.ico">
    <meta charset="utf-8">
    <title>简单百搭的找回密码页面_dowebok</title>
    <link rel="stylesheet" href="../../static/css/login/style.css">
    <script src="../../static/js/jquery.1.10.1.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../static/js/jquery.form.js"></script>
</head>
<body>
<div id="main">
    <form class="form">
        {{ csrf_input }}
        <div class="form-head">
            <h2>找回密码</h2>
        </div>
        <div class="form-body">
            <p class="err-msg" hidden>手机号不可用</p>
            <div class="ui-input">
                <input type="text" placeholder="注册手机号" class="register_mobile" name="register_mobile">
            </div>
            <div class="ui-input narrow-input">
                <input type="text" placeholder="图片验证码" class="image_code_text" name="image_code_text">
                <img class="captcha" src="../../static/images/captcha.png" onclick="generateImageCode()" alt="">
            </div>
            <button class="ui-button ui-button--primary">下一步</button>
        </div>
        <script>
            // TODO 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
            function generateImageCode() {
                // 1. 生成一个编号
                // 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
                imageCodeId = generateUUID();

                // 2. 拼接验证码地址
                var imageCodeUrl = "/image_codes/" + this.imageCodeId;
                console.log('imageCodeUrl---' + imageCodeUrl);
                // 3. 设置页面中图片验证码img标签的src属性
                $(".captcha").attr("src", imageCodeUrl)
            }

            // TODO 生成一个uuid
            function generateUUID() {
                var d = new Date().getTime();
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now(); //use high-precision timer if available
                }
                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = (d + Math.random() * 16) % 16 | 0;
                    d = Math.floor(d / 16);
                    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                });
                return uuid;
            }

            // TODO 发送短信验证码
            function sendMessage() {
                var mobile = $('.register_mobile').val();
                if (!mobile) {
                    $(".mobile_error").show()
                }
                //向后台发送处理数据
                $.ajax({
                    url: "/sms_codes/" + mobile, //目标地址
                    type: "get", //用POST方式传输
                    dataType: "json", //数据格式:JSON
                    data: {
                        "mobile": mobile,
                        "csrfmiddlewaretoken": $("*[name='csrfmiddlewaretoken']").val(),
                    },
                    headers: {
                        'X-CSRFToken': $.cookie('csrftoken')
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    },
                    success: function (msg) {
                        // 走通发送短信验证码流程
                        location.href = "/forgetsecond/";
                    }
                });
            }

            // TODO 提交表单
            $(function () {
                // 开始加载js时先走generateImageCode方法
                generateImageCode();

                $(".ui-button").click(function () {
                    event.preventDefault();
                    uuid = $(".captcha").attr("src").split('/image_codes/')[1];
                    params = {
                        "mobile": $(".register_mobile").val(),
                        "image_code_text": $(".image_code_text").val(),
                        "uuid": uuid,
                        "csrfmiddlewaretoken": $("*[name='csrfmiddlewaretoken']").val(),
                    };

                    $.ajax({
                        url: "/forget/",
                        type: "post",
                        data: JSON.stringify(params),
                        headers: {
                            'X-CSRFToken': $.cookie('csrftoken')
                        },
                        async: false,
                        contentType: "application/json",
                        success: function (resp) {
                            if (resp.errno == "0") {
                                sendMessage();
                            } else {
                                alert(resp.errmsg)
                            }
                        },
                    });
                })


            })


        </script>
    </form>
</div>

<script src="../../static/js/script.js"></script>
</body>
</html>